<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../static/css/font.css" th:href="@{/static/css/font.css}">
    <link rel="stylesheet" href="../static/css/xadmin.css" th:href="@{/static/css/xadmin.css}">
    <script src="../static/lib/layui/layui.js" charset="utf-8" th:src="@{/static/lib/layui/layui.js}"></script>
    <script type="text/javascript" src="../static/js/xadmin.js" th:src="@{/static/js/xadmin.js}"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <div class="demoTable">
                        搜索ID或商品名：
                        <div class="layui-inline">
                            <input class="layui-input" name="keyWord" id="keyWord" autocomplete="off">
                        </div>
                        <span class="input-group-btn">
                            <select name="keyType" id="key_type" class="layui-btn">
                                 <option value="content" selected="selected" >商品名</option>
                            </select>
        </span>
                        <button class="layui-btn" data-type="reload">搜索</button>
                        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
                    </div>

                </div>



                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-table layui-form " id="test" lay-filter="test"></table>


                    <script type="text/html" id="switchTpl">
                        <!-- 这里的 checked 的状态只是演示 -->
                        <input type="checkbox"  iduser={{d.userid}} name="status" value={{d.status}} lay-skin="switch" lay-text="启用|禁用" lay-filter="statusDemo" {{ d.status== "on" ? "checked" : "" }}>
                    </script>



                    <script type="text/html" id="barDemo">
                        <a title="删除" lay-event="del" href="javascript:;">
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"> 删除</a>
                        </a>
                    </script>
                    <!--<script type="text/html" id="recommend">
                        <a title="推荐商品" lay-event="del" href="javascript:;">
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"> 推荐商品</a>
                        </a>
                    </script>-->
                    <script th:src="@{/static/lib/layui/layui.js}" charset="utf-8"></script>
                    <script>
                        layui.use(['form','table'], function(){
                            var table = layui.table;
                            var form = layui.form;
                            table.render({
                                elem: '#test'
                                ,url:'/shopgoodlist'
                                ,id:'contenttable'
                                ,title: '消耗型物品列表'
                                ,cols: [
                                    [
                                        {type: 'checkbox'},
                                        {field:'prodId', title: '商品ID', sort: true}
                                        ,{field:'prodName', title: '商品名称'}
                                        ,{field:'prodType', title: '商品类型'}
                                        ,{field:'shopId', title: '商品商店'}
                                        ,{field:'isConsume', title: '是否消耗品'}
                                        ,{field:'price', title: '价格'}
                                        ,{field:'pic', title: '状态'}
                                        ,{field:'status', title: '更新者'}
                                        ,{field:'totalStocks', title: '库存'}
                                        ,{field:'createTime', title: '创建时间'}
                                        ,{field:'salesVolume', title: '销量'}
                                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                                        /*,{fixed: 'right', title:'操作', toolbar: '#recommend', width:150}*/
                                    ]
                                ]
                                ,page: true
                            });


                            var $ = layui.jquery, active = {

                                reload:function () {
                                    var keyWord=$("#keyWord").val();
                                    var keyType=$("#key_type option:selected").val();
                                    table.reload('contenttable',{
                                        method:'post',
                                        where:{keyWord:keyWord,keyType:keyType}
                                    });
                                }
                            };
                            $('i').on('click', function(){
                                var type = $(this).data('type');
                                active[type] ? active[type].call(this) : '';
                            });
                            $('.layui-btn').on('click', function(){
                                var type = $(this).data('type');
                                active[type] ? active[type].call(this) : '';
                            });

                            //监听行工具事件
                            table.on('tool(test)', function(obj){
                                var data = obj.data;
                                //console.log(obj)
                                if(obj.event === 'del'){
                                    layer.confirm('确定删除么', function(index){

                                        $.ajax({
                                            url: "/deleteshopgood",
                                            type: "get",
                                            data: {prodId :data.prodId},

                                            success: function (){
                                            }

                                        })
                                        obj.del();
                                        layer.close(index);
                                    });
                                } else if(obj.event === 'edit'){
                                    layer.open({
                                        type: 2
                                        ,area:['600px','400px']
                                        ,title: '编辑'
                                        ,content: '/tea/edit/'+data.userid
                                    }, function(value, index){
                                        obj.update({
                                            email: value
                                        });
                                        layer.close(index);
                                    });
                                }
                                else if(obj.event === 'recommend'){
                                    layer.confirm('确定删除么', function(index){

                                        $.ajax({
                                            url: "/deleteshopgood",
                                            type: "get",
                                            data: {prodId :data.prodId},

                                            success: function (){
                                            }

                                        })
                                        obj.del();
                                        layer.close(index);
                                    });
                                }
                            });

                            //监听状态操作
                            form.on('switch(statusDemo)', function(obj){
                                var data = obj.data;
                                this.checked ? obj.value = 'on' : obj.value = 'off';
                                var iduser = $(this).attr('iduser');
                                $.ajax({
                                    url: "/tea/upstatus",
                                    type: "get",
                                    data: {userid: iduser,status: obj.value},

                                    success: function () {
                                    }

                                })
                                if(obj.value=='off'){

                                    //发异步把用户状态进行更改
                                    layer.msg('已停用!',{icon: 5,time:1000});

                                }else{
                                    layer.msg('已启用!',{icon: 6,time:1000});

                                }
                            });


                            //工具栏事件
                            table.on('toolbar(test)', function(obj){
                                var checkStatus = table.checkStatus(obj.config.id);
                                switch(obj.event){
                                    case 'getCheckData':
                                        var data = checkStatus.data;
                                        layer.alert(JSON.stringify(data));
                                        break;
                                    case 'getCheckLength':
                                        var data = checkStatus.data;
                                        layer.msg('选中了：'+ data.length + ' 个');
                                        break;
                                    case 'isAll':
                                        layer.msg(checkStatus.isAll ? '全选': '未全选')
                                        break;
                                };
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../static/js/jquery.min.js" th:src="@{/static/js/jquery.min.js}"></script>
<script>
    layui.use(['laydate','form'], function(){
        var laydate = layui.laydate;
        var  form = layui.form;


        // 监听全选
        form.on('checkbox(checkall)', function(data){

            if(data.elem.checked){
                $('tbody input').prop('checked',true);
            }else{
                $('tbody input').prop('checked',false);
            }
            form.render('checkbox');
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });


    });

    function delAll (argument) {
        var ids = [];

        // 获取选中的id
        $('tbody input').each(function(index, el) {
            if($(this).prop('checked')){
                ids.push($(this).val())
            }
        });

        layer.confirm('确认要删除吗？'+ids.toString(),function(index){
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
    }
</script>
</html>